<template>
  <m-modal
    class="v-component-cite-modal"
    :visible="visible"
    mask
    :width="480"
    :height="400"
    title="组件引用"
    :confirm-disabled="validate.error"
    @ok="handleSave()"
    @cancel="handleCancel()"
  >
    <div class="_container">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          v-for="item in groupList"
          :key="item.tag"
          class="g-bolder g-m-b-8"
          :title="item.label"
          :name="item.tag"
        >
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="child in item.children"
              :key="child.id"
              class="_item"
              :label="child.id"
            >
              {{ child.showName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-collapse-item>
      </el-collapse>
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { usePortal } from "@/common/usePortal";
import { reactive, ref, watch, onMounted } from "vue";
import { mixPopup } from "@/common/Portal";
import { modelService, projectService } from "@/modules/model/service";
import { MenuItem } from "@/constants/types";
import { locale } from "@/util/locale";
import { MenuConfig } from "@/config/types";
import { DiagramConfig, SiderbarGroup } from "@/modules/model/comps/station/graphTabs/graphEditor/DiagramConfig";
defineOptions(
  mixPopup({
    name: "c-component-cite-modal"
  })
);
const emit = defineEmits<{
  (event: "sure", data: string): void;
  (event: "close", data: string): void;
}>();

const { visible, handleCancel, handleOk } = usePortal(emit);
const activeNames = ref<string[]>(["BASIC_DIAG", "OTHER"]);

const validate = reactive({ error: true, content: "" });

const groupList = ref<MenuItem[]>([
  { tag: "BASIC_DIAG", label: "基础图", value: "", children: [] },
  { tag: "OTHER", label: "定制视图", value: "", children: [] }
]);
const checkList = ref<string[]>([]);
watch(
  () => checkList.value,
  val => {
    if (val.length > 0) {
      validate.error = false;
    } else {
      validate.error = true;
    }
  }
);
let targetConfigs: { target: string[]; diagramConfig: DiagramConfig; menuConfig: MenuConfig }[] = [];
const handleSave = () => {
  const resultConfigs: SiderbarGroup[] = [];
  checkList.value.forEach(val => {
    const list = targetConfigs.filter(it => it.target.indexOf(val) > -1);
    list.forEach(l => resultConfigs.push(...(l.diagramConfig.siderbarConfig as unknown as SiderbarGroup[])));
  });
  handleOk(resultConfigs);
};

onMounted(async () => {
  const configs = await projectService.getComponentsByStId(app.$route.query.projectId as string);
  // 找到所有配置过组件区的配置
  targetConfigs = configs.filter(it => it.diagramConfig && it.diagramConfig.siderbarConfig && it.diagramConfig.siderbarConfig.length);
  const appliedStereotypes: string[] = [];
  targetConfigs.forEach(it => appliedStereotypes.push(...it.target));
  appliedStereotypes.distinct();
  const modelDatas = await modelService.getModelDatas(app.$route.query.projectId as string, appliedStereotypes);
  modelDatas.forEach(it => {
    if (it.id.startsWith("SysMLDI::") && locale.getTByKey("modelConfig." + it.id.substring(9))) {
      groupList.value
        .find(it_ => it_.tag === "BASIC_DIAG")
        ?.children?.push({ ...it, value: it.id, showName: locale.getTByKey("modelConfig." + it.id.substring(9)) });
    } else {
      groupList.value.find(it_ => it_.tag === "OTHER")?.children?.push({ ...it, value: it.id, showName: it.name });
    }
  });
  console.log("modelDatas", modelDatas);
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/theme.scss";
.v-component-cite-modal {
  ._container {
    overflow: auto;
    height: 100%;
    :deep(.el-collapse-item__header) {
      background-color: $frame-siderbar-bg-color;
      height: 24px;
      line-height: 24px;
      padding-left: 6px;
    }
    :deep(.el-collapse-item__wrap) {
      border: none;
    }
    :deep(.el-collapse-item__content) {
      padding-bottom: 6px;
    }
    ._item {
      height: 24px;
      line-height: 24px;
    }
    :deep(.el-checkbox) {
      display: block;
      padding-left: 18px;
    }
  }
}
</style>
